<template>
  <div class="container" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 1.安装cesium
// 2、讲cesium目录下的Build/Cesium 的四个目录拷贝倒public

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

const cesiumContainer = ref(null)

onMounted(() => {
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭信息框
    geocoder: false, // 关闭搜索
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景查看器的场景模式
    baseLayerPicker: false, // 图层选择器
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    timeline: false, //时间轴
    fullscreenButton: false, // 全屏按
    // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
    //   url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&format=tiles&tk=6279fa5e949774e76451ce12cb69f6b1',
    //   layer: 'tdtImgLayer',
    //   style: 'default',
    //   format: 'image/jpeg',
    //   tileMatrixSetID: 'GoogleMapsCompatible',
    // }),

    // 天地图影像
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&format=tiles&tk=6279fa5e949774e76451ce12cb69f6b1',
      layer: 'tdtImgLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
    }),
    // 高德
    // imageryProvider: new Cesium.UrlTemplateImageryProvider({
    //   url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    //   layer: 'tdtVecBasicLayer',
    //   style: 'default',
    //   format: 'image/jpeg',
    //   tileMatrixSetID: 'GoogleMapsCompatible',
    // }),
  })
  // 设置图层叠加
  const imageryLayers = viewer.imageryLayers
  const layer = imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      layer: 'tdtVecBasicLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
    }),
  )
  // 设置图层的透明度
  layer.alpha = 0.3

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
})
</script>
